<template>
	<div style="width: 100%">
		<div class="header">
			<h1>直聘新闻和数据实时跟踪</h1>
		</div>
		<div class="main">
			<el-space direction="vertical">
				<el-card
					v-for="item in state.itemList"
					:key="item.id"
					class="w-1000px h-177px cursor-pointer"
					style="padding: 16px 16px"
					@click="to(item.id)"
				>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-image
								style="width: 100%; height: 100%; border-radius: 12px"
								:src="item.img"
							/>
						</el-col>
						<el-col :span="18">
							<h2>
								{{ item.title }}
							</h2>
							<p>
								{{ item.synopsis }}
							</p>
						</el-col>
					</el-row>
				</el-card>
			</el-space>

			<div class="page">
				<el-pagination
					@current-change="sendValue"
					layout="prev, pager, next"
					:total="state.query.total"
				/>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive({
	//条件查询
	query: {
		title: '',
		page: 1,
		pagesize: 10,
		total: 0,
	},
	//数据
	itemList: [],
})

/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/articleInfo/${id}`)
}

/**
 * 分页出发函数
 * @param val
 */
const sendValue = (val: number) => {
	state.query.page = val
	init()
}

function init() {
	http
		.get(`artcle/page?page=${state.query.page}&title=${state.query.title}`)
		.then((res) => {
			state.itemList = res.data.list
			state.query.total = res.data.total
		})
}
init()
</script>
<style scoped>
.page {
	margin-top: 20px;
	margin-bottom: 100px;
	display: flex;
	justify-content: center;
	text-align: center;
}
.header {
	width: 100%;
	height: 240px;
	background: url(https://img.bosszhipin.com/static/file/2022/lmmi44x97d1667814225827.jpg);
	margin-bottom: 20px;
}

.main {
	width: 1000px;
	margin: 0 auto;
}

h1 {
	padding-top: 80px;

	display: block;
	width: 100%;
	text-align: center;
	font-size: 36px;
	font-weight: 500;
	color: #fff;
}

:deep(.el-card__body) {
	padding: 0 0;
}

h2 {
	font-size: 18px;
	font-weight: 500;
}

p {
	font-size: 14px;
	line-height: 24px;
	color: #666;
	padding: 17px 0 0;
	margin-bottom: 35px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
